<script setup lang="ts">
import { ref, reactive } from 'vue'
import { timeFormat_2, copyToCliboard } from '@/hooks/util'
import { message } from 'ant-design-vue'
import * as promotionCenterApi from '@/api/promotionCenter'

interface Pagination {
  page: number
  pageSize: number
  total: number
  current?: number
  onChange: Function
  showSizeChanger: boolean
  showQuickJumper: boolean
}

const handlePageChange = (page: any, pageSize: any) => {
  pagination.value.pageSize = pageSize
  searchParams.value.pageSize = pageSize
}

const pagination = ref<Pagination>({
  page: 1,
  pageSize: 10,
  total: 0,
  onChange: handlePageChange,
  showSizeChanger: true,
  showQuickJumper: true
})
let loading = ref<boolean>(false)

interface SearchParams {
  currentPage: number
  pageSize: number
  [propName: string]: any
}
const searchParams = ref<SearchParams>({
  currentPage: pagination.value.page,
  pageSize: pagination.value.pageSize,
})

const dataSource = ref([])
const columns = [
  // {
  //   title: '用户id',
  //   key: 'userId',
  //   width: 180,
  // },
  // {
  //   title: '用户名',
  //   key: 'userName',
  //   width: 120,
  // },
  // {
  //   title: '受邀用户ID',
  //   key: 'inviteeUserId',
  //   width: 180,
  // },
  {
    title: '受邀用户名',
    key: 'name',
    width: 120,
  },
  {
    title: '变动类型',
    key: 'changeType',
    width: 100,
  },
  {
    title: '变动积分',
    key: 'changeIntegral',
    width: 120,
  },
  {
    title: '变动明细',
    key: 'beforeIntegral',
    width: 120,
  },
  {
    title: '变动备注',
    key: 'changeRemark',
    width: 180,
  },
  {
    title: '修改时间',
    key: 'updateTime',
    width: 180,
  },
  {
    title: '创建时间',
    key: 'createTime',
    width: 180,
  },
  // {
  //   title: '操作',
  //   key: 'action',
  //   width: 200,
  //   fixed: 'right',
  //   align: 'center',
  // },
]

// 表格多选
const selectedRowKey = ref<Array<any>>([])
const selectedRow = ref<Array<object>>([])
const onSelectChange = (selectedRowKeys: any[], selectedRows: any[]) => {
  selectedRowKey.value = selectedRowKeys
  selectedRow.value = selectedRows
}

// 翻页
const changePage = (e: any) => {
  pagination.value.current = e.current
  pagination.value.pageSize = e.pageSize
  searchParams.value.currentPage = pagination.value.current as number
  getList()
}

// ---------------------------------------------------------

const getList = async () => {
  loading.value = true
  try {
    let {
      state,
      data,
      message: msg,
    } = await promotionCenterApi.getPointCardRecord(searchParams.value)
    if (state === 200) {
      dataSource.value = data.list
      pagination.value.total = Number(data.totalCount)
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
  loading.value = false
}

import type { SelectProps } from 'ant-design-vue'
const changeTypeList = ref<SelectProps['options']>([
  {
    label: '积分添加',
    value: 1,
  },
  {
    label: '积分扣除',
    value: 11,
  },
])

onMounted(() => {
  getList()
})

const formRef = ref()
interface FormState {
  name?: string
  changeType?: number
  [propName: string]: any
}
const formState = reactive<FormState>({})

// 查询
const search = () => {
  pagination.value.current = 1
  searchParams.value.currentPage = 1
  formRef.value.validate().then(() => {
    // console.log('formState=', formState)
    if (formState.name) {
      searchParams.value.name = formState.name
    }
    if (formState.changeType) {
      searchParams.value.changeType = formState.changeType
    }

    getList()
  })
}

// 重置
const reset = () => {
  pagination.value.current = 1
  searchParams.value.currentPage = 1
  formRef.value.resetFields()

  formRef.value.resetFields()
  for (let key in searchParams.value) {
    if (key != 'currentPage' && key != 'pageSize')
      searchParams.value.hasOwnProperty(key) && delete searchParams.value[key]
  }

  getList()
}

defineExpose({
  getList,
})
</script>

<template>
  <div class="searchBox">
    <a-form ref="formRef" layout="inline" :model="formState" class="formClass">
      <a-form-item label="受邀用户名" name="name">
        <a-input v-model:value="formState.name" placeholder="受邀用户名" />
      </a-form-item>

      <a-form-item label="变动类型" name="changeType">
        <a-select
          v-model:value="formState.changeType"
          placeholder="变动类型"
          style="width: 150px"
          allowClear
        >
          <a-select-option v-for="(item, index) in changeTypeList" :key="index" :value="item.value">
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item>
        <a-button type="primary" style="border-radius: 6px" @click="search">搜索</a-button>
        <a-button @click="reset" style="border-radius: 6px">重置</a-button>
        <a-dropdown v-if="selectedRowKey.length > 0">
          <a-button>
            批量操作
            <DownOutlined />
          </a-button>
          <template #overlay>
            <a-menu>
              <a-menu-item @click="copyRuleAll">批量复制</a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </a-form-item>
    </a-form>
  </div>
  <a-table
    style="overflow-x: scroll"
    :columns="columns"
    :data-source="dataSource"
    :pagination="pagination"
    :loading="loading"
    @change="changePage"
    rowKey="id"
    :scroll="{ x: 1000 }"
  >
    <!-- :row-selection="{ selectedRowKeys: selectedRowKey, onChange: onSelectChange }" -->
    <template #emptyText>
      <a-empty description="暂无数据" />
    </template>

    <template #headerCell="{ column }">
      <template v-if="column.key === 'id'">
        <span>id</span>
      </template>
    </template>

    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'userId'">
        <div style="width: 180px">
          {{ record.userId }}
        </div>
      </template>

      <template v-else-if="column.key === 'userName'">
        <div style="width: 120px">
          {{ record.userName }}
        </div>
      </template>

      <template v-else-if="column.key === 'inviteeUserId'">
        <div style="width: 180px">
          {{ record.inviteeUserId }}
        </div>
      </template>

      <template v-else-if="column.key === 'name'">
        <div style="width: 120px">
          {{ record.name }}
        </div>
      </template>

      <template v-else-if="column.key === 'changeType'">
        <a-tag color="blue" v-if="record.changeType == 1">积分添加</a-tag>
        <a-tag color="red" v-if="record.changeType == 11">积分扣除</a-tag>
      </template>

      <template v-else-if="column.key === 'changeRemark'">
        <div style="width: 180px">{{ record.changeRemark }}</div>
      </template>

      <template v-else-if="column.key === 'changeIntegral'">
        <div style="width: 120px">{{ record.changeIntegral }}</div>
      </template>

      <template v-else-if="column.key === 'beforeIntegral'">
        <div style="width: 120px">变动前：{{ record.beforeIntegral }}</div>
        <div style="width: 120px">变动后：{{ record.afterIntegral }}</div>
      </template>

      <template v-else-if="column.key === 'createTime'">
        <div style="width: 180px">
          {{ timeFormat_2(record.createTime) }}
        </div>
      </template>

      <template v-else-if="column.key === 'updateTime'">
        <div style="width: 180px">
          {{ timeFormat_2(record.updateTime) }}
        </div>
      </template>

      <template v-else-if="column.key === 'action'">
        <div style="width: 180px"></div>
      </template>
    </template>
  </a-table>
</template>

<style lang="less" scoped>
.hiddenText {
  display: inline-block;
  width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.searchBox {
  margin-bottom: 10px;
  display: flex;

  input {
    width: 200px;
    margin-right: 10px;
  }

  button {
    margin-right: 10px;
  }
}
</style>
